<template>
  <div class="wrapper">
    <div class="header">
      <span class="return" @click="back()">返回</span>
      {{groupData.Name}}
    </div>
    <div class="groupItem">
      <img :onerror="defaultGroupImg" :src="groupData.FaceUrl" alt="">
      <div class="groupText">
        <div class="groupName"> {{groupData.Name}}</div>
        <div class="groupId">群id: {{groupData.GroupId}}</div>
      </div>
    </div>
   
    <div class="myCard">
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
      <div class="myCardTitle">
        群类型
        <div class="notSet">{{groupData.TypeZh}}</div>
      </div>
    </div>
    <div class="myCard">
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
      <div class="myCardTitle">
        创建时间
        <div class="notSet">{{dataTime(groupData.CreateTime)}}</div>
      </div>
    </div>
    <!-- <div class="selectedFriends">
      <div class="friendList">
        <img  class="icon"src="../../assets/img/icon_group@3x.png" alt="">
        <div class="faceItem">     
          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035232992,4003217897&fm=27&gp=0.jpg" alt="">
          <img src="../../assets/img/icon_addfm@3x.png" alt="">
        </div>
      </div>
      <div class="Set">已选2名<img src="../../assets/img/icon_shape@3x.png" alt=""></div>
    </div> -->
    <div class="divisionLine"></div>
    <div class="myCard">
      <div class="myCardTitle">
        群主
        <div class="notSet">{{groupName}}</div>
      </div>
    </div>
    <div class="myCard">
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
      <div class="myCardTitle">
        群成员人数
        <div class="notSet">{{groupData.MemberNum}}</div>
      </div>
    </div>
    <div class="sendWrapper">
       <mt-button v-show="noExist" @click="applyJoinGroup()" type="danger" size="large" >申请加入</mt-button>
       <mt-button v-show="isExist" type="danger" size="large" >已加入群</mt-button>
    </div>
  </div>
</template>
<script>
import Client from '../../assets/js/common';
import { Toast } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Actionsheet } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import {checkStatus} from '../../assets/js/login';
export default {
  data () {
    return {
      loginInfo: {},
      groupData: {},
      isExist: false, // 已经加入该群
      noExist: false, // 未加入该群
      groupName: '',
      defaultGroupImg: Client.defaultGroupImg
    }
  },
  created () {
    checkStatus((loginInfo) => {
      this.loginInfo = loginInfo;
      this.groupData = Client.getStore("searchGroupData");
      this.getGroupList(this.handleListData);
      console.log(Client.getStore('createGroupInfo'));
    });
  },
  methods: {
    back() {
      this.$router.back();
    },
    dataTime(time){
      if(time) {
        let arr = time.split(" ");
        return arr[0];
      }
    },

    // 群组列表
      getGroupList(cbOK) {
					let options = {
							'Member_Account': this.loginInfo.identifier,
							'Limit': 200,
							'Offset': 0,
							//'GroupType':'',
							'GroupBaseInfoFilter': [
									'Type',
									'Name',
									'Introduction',
									'Notification',
									'FaceUrl',
									'CreateTime',
									'Owner_Account',
									'LastInfoTime',
									'LastMsgTime',
									'NextMsgSeq',
									'MemberNum',
									'MaxMemberNum',
									'ApplyJoinOption',
									'ShutUpAllMember'
							],
							'SelfInfoFilter': [
									'Role',
									'JoinTime',
									'MsgFlag',
									'UnreadMsgNum'
							]
					};
					webim.getJoinedGroupListHigh(
							options,
							(resp) => {
                if (cbOK) {
                      cbOK(resp);
                  }
									if (!resp.GroupIdList || resp.GroupIdList.length == 0) {
                      // Toast('你目前还没有加入任何群组');
											return;
                  }
							},
							(err) => {
                  // alert(err.ErrorInfo);
                  Client.errInfo()
							}
					);
      },

      // 处理群组列表数据
      handleListData(resp) {
        for(let i = 0; i < resp.GroupIdList.length; i++) {
          if(resp.GroupIdList[i].GroupId == this.groupData.GroupId) {
            this.isExist = true;
          }
        }
        if(!this.isExist){
          this.noExist = true;
        }
        let ids = [];
        ids.push(this.groupData.Owner_Account);
        this.getpersonData(ids);
        
        
      },
      // 个人资料列表
			getpersonData(ids) {
					let tag_list = [
							"Tag_Profile_IM_Nick", // 昵称
					];
					let options = {
							'To_Account': ids,
							'TagList': tag_list
					};
					webim.getProfilePortrait(
							options,
							(resp) => {
                let datas = [];
									 if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
                     console.log("womendushi",resp.UserProfileItem)
                     
                     for(let i = 0; i < resp.UserProfileItem.length; i++){
                       let obj =  {};
                        obj["To_Account"] = resp.UserProfileItem[i].To_Account;
                       for(let j = 0; j < resp.UserProfileItem[i].ProfileItem.length; j++){
                         obj[resp.UserProfileItem[i].ProfileItem[j].Tag] = resp.UserProfileItem[i].ProfileItem[j].Value
                       }
                       datas.push(obj);
                     }
                     this.groupPersons = datas[0];
                     Client.log(123321);
                     this.groupName = this.groupPersons.Tag_Profile_IM_Nick;
                     Client.log(123321);
									}
							},
							(err) => {
                  // alert(err.ErrorInfo);
                  Client.errInfo()
							}
					);
					// $('#set_profile_portrait_dialog').modal('show');
      },

      applyJoinGroup() {
        let groupId = this.groupData.GroupId;
        let options = {
            'GroupId':groupId,
            'UserDefinedField': ''
        };
        webim.applyJoinGroup(
            options,
            (resp) => {
                let joinedStatus = resp.JoinedStatus; //JoinedSuccess--成功加入，WaitAdminApproval--等待管理员审核
                if (joinedStatus == "JoinedSuccess") {
                   Toast('成功加入该群');
                   this.$router.push({path: 'AddressList?type=1'})
                } else {
                  Toast('申请成功，请等待群主审核');
                }
            },
            (err) => {
                // alert(err.ErrorInfo);
                console.log(err);
                if(err.ErrorCode == 10007){
                  Toast('禁止加入群');
                }else if(err.ErrorCode == 10013){
                  Toast("已经加入该群");
                  this.$router.push({path: '/session?selType=GROUP&id='+groupId})
                }else {
                  Client.errInfo();
                }
                
            }
        );
      }

    
  },
  components: {
   
  }
}
</script>
<style>
  .sendWrapper {
    width: 3.45rem;
    position: fixed;
    bottom: 0.28rem;
    margin: 0 0.15rem;
  }
  .sendWrapper .mint-button--danger {
    background-color: #4F4F4F;
  }
  .sendWrapper .mint-button--danger .mint-button-text {
    font-size: 0.16rem;
  }
</style>
<style lang="less" scoped>
  .wrapper {
    .divisionLine {
      height: 0.1rem;
      background-color: #F4F4F4;
    }
    .header {
      width: 3.75rem;
      height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 0.16rem;
      border-bottom: 1px solid #f4f4f4;
      background-color: white!important;
      .return {
        color: #4A4A4A;
        font-size: 0.16rem;
        position: absolute;
        left: 0.15rem;
      }
    }
    .groupItem {
      height: 0.8rem;
      padding: 0.15rem 0;
      display: flex;
      background-color: white;
      box-sizing: border-box;
      img {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        margin: 0 0.1rem 0 0.15rem;
      }
      .groupText {
        height: 0.5rem;
        .groupName {
          height: 0.22rem;
          line-height: 0.22rem;
          margin-bottom: 0.08rem;
          font-size: 0.16rem;
          color: #4A4A4A;
        }
        .groupId {
          font-size: 0.14rem;
          color: #818181;
        }
      }
    }
    .myCard {
      height: 0.51rem;
      background-color: white;
      padding: 0 0.15rem;
      .lineWrapper {
        height: 1px;
        .line {
          width: 3.45rem;
          height: 1px;
          background-color: #E5E5E5;
        }
      }
      .myCardTitle {
        height: 0.5rem;
        line-height: 0.5rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.14rem;
        color: #4a4a4a;
        .manageItem {
          display: flex;
          align-items: center;
          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.1rem;
          }
        }
        .notSet {
          display: flex;
          align-items: center;
          img {
            width: 0.15rem;
          }
        }
      }
      .line {
        height: 1px solid #E5E5E5;
      }
    }
    .selectedFriends {
      height: 0.7rem;
      display: flex;
      justify-content: space-between;
      padding: 0 0.15rem;
      background-color: white;
      align-items: center;
      .friendList{
        display: flex;
        align-items: center;
        .icon {
          width: 0.20rem;
          height: 0.20rem;
          margin-right: 0.1rem;
        }
        .faceItem {
          img {
            width: 0.5rem;
            height: 0.5rem;
            float: left;
            border-radius: 50%;
            margin-right: 0.1rem;
          }
        }
      }
      .Set {
          display: flex;
          align-items: center;
          font-size: 0.12rem;
          img {
            width: 0.15rem;
            height: 0.15rem;
            margin: 0;
          }
      }
    }
    .groupInfo {
      height: 0.7rem;
      background-color: white;
      padding: 0.14rem 0.15rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .Set {
          display: flex;
          align-items: center;
          font-size: 0.12rem;
          img {
            width: 0.15rem;
            height: 0.15rem;
            margin: 0;
          }
        }
      .groupName {
        color: #4F4F4F;
        font-size: 0.14rem;
      }
      .text {
        padding-top: 0.05rem;
        font-size: 0.12rem;
        color: #818181;
      }
    }
  }
</style>


